<template>
  <div>
    <NuxtLink :to="`./customer-case/detalis/${item.case_id}`" v-for="(item, index) in caseList" :key="index">
      <div class="flex items-center bg-zinc-100 mt-6 min-h-24">
        <div class="aspect-[4/3] min-h-24 min-w-32 max-w-64">
          <img class="w-full h-full object-cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" />
        </div>
        <div class="py-1 px-3 lg:p-6">
          <h3 class="text-lg font-bold text-gray-900">{{ item.title }}</h3>
          <p class="mt-2 text-sm text-gray-500 leading-7 line-clamp-1 lg:line-clamp-4">{{ item.content }}</p>
        </div>
      </div>
    </NuxtLink>
  </div>
</template>

<script setup>
const { data: result } = await useFetch("/api/solution/customerCase", { params: { page: 1, pageSize: 8 } });
const caseList = ref(result.value.data);
caseList.value.forEach((item) => (item.content = item.content.replace(/<[^>]+>/g, "")));
</script>
<style scoped lang="scss"></style>
